<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>百度一下，你就知道</title>
  <style>

    ul {
      list-style-type: none;
      margin-top: 20px;
      padding: 0;
      overflow: hidden;
    }

    li {
      float: left;
      margin-left: 10px;
    }

    li a {
      display: block;
      font-size: small;
      color: black;
      text-align: center;
      padding: 5px 5px;
      text-decoration: none;
    }

    li a:hover:not(.land) {
      color: blue;
    }
    .land {
      color: white;
      background-color: rgba(0,0,255,0.8);
      border-radius: 8PX;
    }
    .one {
      position: relative;
      height: 500px;
      /*background-color: pink;*/
      margin:10px auto;
      display: flex;
      justify-content: center;

    }
    .two {
      width: 400px;
      height: 40px;
      border: 2px solid blue;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;


    }
    .three {
      /*float: left;*/
      width: 100px;
      height: 46px;
      color: white;
      background-color: #4c4c4c;
      border: 0;
      font-size: medium;
      line-height:46px;
      text-align: center;
      border-top-right-radius: 23px;
      border-bottom-right-radius: 23px;
      background-color: rgba(0,0,255,0.8)



    }
    .picture {
      position: absolute;
      height: 150px;
      margin-top: 80px;

    }
    .search {

      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;

    }
    .anniu {
      float: right;
      margin-right: 50px;
    }
    /*.down{*/
    /*    padding: 0;*/
    /* display: none;*/
    /*}*/
    /*.ul a{*/
    /*    display: block;*/
    /*}*/
    .down :hover a{
      background-color:red;
    }
    .select :hover  {
      display: block;
    }
    /*liuzhaoyi */
    .ty{
      /*正常咱们不显示的所以是none */
      display: none ;
    }
    .lzy:hover .ty{
      /*hover,鼠标移动到上面下面的下拉框会显示 */
      display: block;
    }
    .ty li:hover a{
      /*下拉框显示内容，我们鼠标停留的时候显示高亮，给个原谅色吧 */
      color:green
    }
    .hjm{
      display: block;
    }

  </style>
</head>
<body>
<ul>
  <li><a href="#" >新闻</a></li>
  <li><a href="#" >hao123</a></li>
  <li><a href="#" >地图</a></li>
  <li><a href="#" >直播</a></li>
  <li><a href="#" >视屏</a></li>
  <li><a href="#" >贴吧</a></li>
  <li><a href="#" >学术</a></li>
  <li><a href="#" >更多</a></li>
  <ul class="anniu">
    <li><a href="#"class="select" >设置</a>
      <ul class="down" >
        <li><a href="#">搜索设置</a></li>
        <li><a href="#">高级搜索</a></li>
        <li><a href="#">关闭预测</a></li>
        <li><a href="#">隐私设置</a></li>
        <li><a href="#">关闭热搜</a></li>
      </ul>
    </li>
    <li ><a class="land" href="#">登录</a></li>
  </ul>
  <!--刘钊邑-->
  <li class="lzy" ><a href="#" style="color: hotpink;">下拉</a>
    <ul class="ty">
      <div class="hjm"><a >田</a></div>
      <div class="hjm"><a >桑</a></div>
      <div class="hjm"><a >好</a></div>
    </ul>
  </li>
</ul>



<div class="one">
  <img src="../../image/baidu.png" class="picture">

  <div class="search">
    <input type="text" class="two">
    <input type="button" class="three"  value="百度一下">
  </div>

</div>
</body>
</html>